<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2025-11-13 09:54:36
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-14 10:32:51
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <script src="./js/jquery.js"></script>
  <style>
    #loading{
      /* display: none; */
      width: 100%;
      height: 320px;
      line-height: 320px;
      text-align: center;
      background-color: #959595bb;
      position: fixed;
      top: 80px;
      left: 0;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  首页<br>
  欢迎登录，<span id="username"></span>
  <button onclick="logoutHandle()">退出</button>
  <br>
  公司信息<br>
  <button>新增</button>
  <table>
    <tr id="companyTh">
      <th>id</th>
      <th>公司编码</th>
      <th>公司名</th>
      <th>操作</th>
    </tr>
    <!-- <tr>
      <td>1</td>
    </tr> -->
  </table>
  当前是第<span id="pageNumber"></span>页
  每页<span id="pageSize"></span>条
  共<span id="totalPage"></span>页
  共<span id="totalRow"></span>条
  <div id="loading">
      加载中<i class="fa fa-spinner fa-spin"></i>
  </div>
</body>
<script>
  // 接收登录页的消息
  window.addEventListener('message',function(e){
    console.log('🤡 CC -  e.data:',  e.data);
    var {phoneNum} = e.data;
    var text =  $("#username").text();
    $("#username").text(text+phoneNum);
  })
  // 退出系统 
  function logoutHandle(){
    console.log('🤡 CC - logoutHandle - logoutHandle:', );
    // 1. 储存的信息删掉 - 清除session中的内容
    sessionStorage.removeItem("username");
    sessionStorage.clear();
    // 2. 退回到登录页
    window.location.href = "http://127.0.0.1:5500/day22/login.html";
  }
  var result = sessionStorage.getItem("username");
  console.log('🤡 CC - index 页面 - result:', result);
  var phoneNum =  $("#username").text();
  $("#username").text(result+phoneNum);
  // $("#username").text(result);
  // 全局方法 用与控制一些全局变量
  $(document).ajaxStart(function(){
    console.log('🤡 CC - ajaxStart:', );
    $("#loading").show();
  }).ajaxStop(function(){
    $("#loading").hide();
  });
  // jQuery发送http的get请求
  var url = "http://172.16.0.30:8088/company";
  // $.ajax({
  //   // 请求的接口地址
  //   url:url,
  //   // 请求方式
  //   method:"GET",
  //   // 请求参数 
  //   data:{
  //     pageSize:10,
  //     pageNum:1
  //   },
  //   // 获取响应
  //   success:function(res){
  //     // 请求成功，拿到响应内容
  //     // console.log('🤡 CC - res:', res);
  //     if (res.code == 200) {
  //       // ES6 - 解构
  //       var {pageNumber,pageSize,totalRow,totalPage,records} = res.data;
  //       // 将data中的数据渲染到页面上
  //       $("#pageNumber").text(pageNumber);
  //       $("#pageSize").text(pageSize);
  //       $("#totalRow").text(totalRow);
  //       $("#totalPage").text(totalPage);
  //       // 渲染公司信息
  //       $.each(records,function(index,obj){
  //         // console.log('🤡 CC - index,obj:', index,obj);
  //         // console.log('🤡 CC - index,obj:', index,obj.name);
  //         // console.log('🤡 CC - obj.name:', obj.name);
  //         var {id,code,name} = obj;
  //         // 定位表头元素 companyTh
  //         $("#companyTh").after("<tr><td>"+id+"</td><td>"+code+"</td><td>"+name+"</td><td>修改删除</td></tr>")
  //       })
  //     }
  //   },
  //   error:function(err){
  //     // 请求失败，获取到错误
  //     console.log('🤡 CC - err:', err);
  //   }
  // });

  // 用ajax速写替换 
  $.get(url,{pageSize:10,pageNum:1,phoneNumber:""},
    function(res){
      if (res.code == 200) {
        // ES6 - 解构
        var {pageNumber,pageSize,totalRow,totalPage,records} = res.data;
        // 将data中的数据渲染到页面上
        $("#pageNumber").text(pageNumber);
        $("#pageSize").text(pageSize);
        $("#totalRow").text(totalRow);
        $("#totalPage").text(totalPage);
        // 渲染公司信息
        $.each(records,function(index,obj){
          var {id,code,name} = obj;
          // 定位表头元素 companyTh
          $("#companyTh").after("<tr><td>"+id+"</td><td>"+code+"</td><td>"+name+"</td><td>修改删除</td></tr>")
        })
      }
    })
</script>
</html>